<template>
  <div class="LatestNews">
    <div class="news">
<!--      <span>this is LastestNews</span>-->
      <div class="news1">
        <div class="part1">
          <div class="left1">
            <img src="../assets/images/news1.jpg" alt="">
          </div>
          <div class="right1">
            <h1 class="title1">揭秘来自China的china</h1>
            <p class="passage1"> “九秋风露越窑开，夺得千峰翠色来。”从“色比琼玖”到“雨过天青”，中国（China）的瓷器（china）源远流长，历久弥新，在数千年的历史中孕育出别具特色的陶瓷文化。
              “工匠四方来，器成天下走。”正如清代诗人所赞颂的那样，以产瓷闻名天下的景德镇，是广袤中华当之无愧的千年瓷都。而今穿越千年，匠心不改，巧思绵延。在日新月异的今天，饱含文化底蕴的中华陶瓷依然生机不灭，焕发出层层叠叠、令人惊羡的生命力... </p>
            <div style="float: left;color: darkgray;width: 700px;height: 100px;line-height: 100px;text-align: center;margin-right: 100px;text-decoration: underline;">>>查看详情</div>
          </div>
        </div>
      </div>
      <div class="part2">
        <div class="news2">
          <div class="up">
            <img src="../assets/images/news2.jpg" alt="">
          </div>
          <div class="down">
            <h2 class="title2">2023瓷别团队新年致辞：致广大而尽精微  我们一直在路上</h2>
            <p class="passage2">2023年01月05日 编辑</p>
          </div>
        </div>
        <div class="news3">
          <div class="up">
            <img src="../assets/images/news3.jpg" alt="">
          </div>
          <div class="down">
            <h2 class="title2">高端定制，私人企划！瓷别个性化定制产品一览</h2>
            <p class="passage2">2023年02月19日 编辑</p>
          </div>
        </div>
        <div class="news4">
          <div class="up">
            <img src="../assets/images/news4.jpg" alt="">
          </div>
          <div class="down">
            <h2 class="title2">一眼万年：解密中国陶瓷的前世今生</h2>
            <p class="passage2">2023年02月25日 编辑</p>
          </div>
        </div>
      </div>

      <div class="part3">
        <div class="news5">
          <div class="up">
            <img src="../assets/images/news5.jpg" alt="">
          </div>
          <div class="down">
            <h2 class="title2">“东方经典 华夏美学”瓷别芳华系列守护艺术力量</h2>
            <p class="passage2"> 2021年12月03日 编辑</p>
          </div>
        </div>
        <div class="news6">
          <div class="up">
            <img src="../assets/images/news6.jpg" alt="">
          </div>
          <div class="down">
            <h2 class="title2">传递中国特色陶瓷文化，瓷别与景德镇陶瓷大学加深合作</h2>
            <p class="passage2">2021年10月29日 编辑</p>
          </div>
        </div>
        <div class="news7">
          <div class="up">
            <img src="../assets/images/news7.jpg" alt="">
          </div>
          <div class="down">
            <h2 class="title2">生死交界的关照与体面 瓷别团队的初心与初衷</h2>
            <p class="passage2">2021年7月25日 编辑</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
export default {
  name: "LastestNews"
}
</script>

<style scoped>
.LatestNews{
  display: flex;
  flex-direction: column;
  position: center;
}

.section {
  /*height: 100vh;*/
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: black;
  text-align: center;
  /* font-size: 24px; */
  font-weight: bold;
  width: 100%;
  position: relative;
  font-family: '岩田仿宋', serif;
}

.news{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.part1{
  display: flex;
  flex-direction: row;
}

.part2{
  display: flex;
  flex-direction: row;
}

.part3{
  display: flex;
  flex-direction: row;
}

.news1{
  width: 100%;
  height: 450px;
  background-color: #f8f8f8;
}
.news2{
  width: 440px;
  height: 440px;
  float: left;
  margin-top: 50px;
  background-color: #f8f8f8;
}
.news3{
  width: 440px;
  height: 440px;
  float: left;
  margin-top: 50px;
  margin-left: 40px;
  background-color: #f8f8f8;
}
.news4{
  width: 440px;
  height: 440px;
  float: left;
  margin-top: 50px;
  margin-left: 40px;
  background-color: #f8f8f8;
}
.news5{
  width: 440px;
  height: 440px;
  float: left;
  margin-top: 40px;
  background-color: #f8f8f8;
}
.news6{
  width: 440px;
  height: 440px;
  float: left;
  margin-top: 40px;
  margin-left: 40px;
  background-color: #f8f8f8;
}
.news7{
  width: 440px;
  height: 440px;
  float: left;
  margin-top: 40px;
  margin-left: 40px;
  background-color: #f8f8f8;
}

.left1{
  width: 700px;
  height: 450px;
  float: left;
}

.right1{
  width: 700px;
  height: 450px;
  float: left;
}

.title1{
  width: 360px;
  height: 80px;
  float: left;
  margin-left: 170px;
  margin-top: 20px;
  line-height: 80px;
}
.passage1{
  width: 500px;
  height: 220px;
  float: left;
  margin-top: 20px;
  margin-left: 100px;

  font-size: 21px;
  color: #3c3c3c;
}
</style>